<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit</title>
    <!-- 导入bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <!-- 导入初始化的css -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <!-- 导入动画css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <!-- 导入自己的css -->
    <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
    <!-- 头部 -->
    <header id="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed wow bounceInRight" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand wow bounceInLeft" href="#">Spirit8</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="wow bounceInDown" href="#main">HOME</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#about">About</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="200ms" href="#intro">TEAM</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="300ms" href="#services">SERVICES</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="400ms" href="#clients">Clients</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="500ms" href="#contact">CONTACT</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <!-- 主体部分 -->
    <!-- 第一部分大图片 -->
    <div class="main" id="main">
        <div class="maintitle wow bounceIn">
            <h2>Welcome on <span>spirit8</span></h2>
            <p class="mainword wow rubberBand" data-wow-delay="800ms">We are a  <span
                    class="mainwordbold">technology sharing website</span> 
        </div>
        <div class="maincircle wow fadeIn" data-wow-delay="200ms">
            <a href="#foot">↓</a>
        </div>
    </div>
    <!-- 第二部分 -->
    <div class="about" id="about">
        <div class="container">
            <div class="left wow bounceIn">
                <img src="./assets/images/about-background.png" alt="">
            </div>
            <div class="right">
                <div class="title wow fadeIn">
                    <p>ABOUT US</p>
                    <h3>
                        <span>SOME </span>WORDS <span>ABOUT US</span>
                    </h3>
                </div>
                <div class="desc wow fadeIn" data-wow-delay="100ms">
                    We love building and rebuilding brands through our specific skills.Using colour,fonts,and
                    illustration,we brand companies in a way they will never forget.
                </div>
                <ul>
                    <li class="wow fadeIn" data-wow-delay="200ms"><span
                            class="glyphicon glyphicon-record"></span><span>Mission - </span><span>We deliver uniqueness and
                            quality</span></li>
                    <li class="wow fadeIn" data-wow-delay="250ms"><span
                            class="glyphicon glyphicon-record"></span><span>Skills - </span><span>Delivering fast and
                            excellent results</span></li>
                    <li class="wow fadeIn" data-wow-delay="300ms"><span
                            class="glyphicon glyphicon-record"></span><span>Clients - </span><span>Satisfied clients thanks
                            to our experience</span></li>
                </ul>
                <a class="buttondiv wow fadeIn" data-wow-delay="300ms">
                    <div class="btn">
                        <img src="./assets/images/about-btn.png" alt="">
                        <p>BROWSE OUR WORK</p>
                    </div>
                </a>
            </div>
        </div>
        
    </div>
    <!-- 第三部分 -->
    <div class="intro" id="intro">
        <div class="title wow fadeIn">
            <h3>
                MEET
                <span>OUR TEAM</span>
            </h3>
        </div>
        <div class="four">
            <div class="demo">
                <img src="./assets/images/cover.png" alt="" class="wow fadeIn" data-wow-delay="100ms">
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="150ms">Jason Statham</h1>
                    <h3 class="wow fadeIn" data-wow-delay="200ms">Knife designer</h3>
                    <p class="wow fadeIn" data-wow-delay="250ms">Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.Do not seek to change what has come before. Seek to
                        create that which has not.</p>
                </div>

            </div>
            <div class="demo">
                <img src="./assets/images/cover.png" alt="" class="wow fadeIn" data-wow-delay="100ms">
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="150ms">Van Damme</h1>
                    <h3 class="wow fadeIn" data-wow-delay="200ms">No English</h3>
                    <p class="wow fadeIn" data-wow-delay="250ms">Do not seek to change what has come before. Seek to
                        create that which has not.</p>
                </div>

            </div>
            <div class="demo">
                <img src="./assets/images/cover.png" alt="" class="wow fadeIn" data-wow-delay="100ms">
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="150ms">Sylvester Stallone</h1>
                    <h3 class="wow fadeIn" data-wow-delay="200ms">Cigar Lover</h3>
                    <p class="wow fadeIn" data-wow-delay="250ms">Do not seek to change what has come before. Seek to
                        create that which has not.</p>
                </div>

            </div>
            <div class="demo">
                <img src="./assets/images/cover.png" alt="" class="wow fadeIn" data-wow-delay="100ms">
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="150ms">Jet Li</h1>
                    <h3 class="wow fadeIn" data-wow-delay="200ms">I need more money</h3>
                    <p class="wow fadeIn" data-wow-delay="250ms">Do not seek to change what has come before. Seek to
                        create that which has not.</p>
                </div>

            </div>
        </div>
        <div class="page fadeIn" data-wow-delay="250ms">
            <input type="radio" name="chk" id="chk1">
            <label for="chk1" id="chk1" class="choice">
            </label>
            <input type="radio" name="chk" id="chk2">
            <label for="chk2" id="chk2" class="choice">
            </label>
            <input type="radio" name="chk" id="chk3">
            <label for="chk3" id="chk3" class="choice">
            </label>
        </div>

    </div>
    <!-- 第四部分 -->
    <div class="services" id="services">
        <div class="title wow fadeIn">
            <h3>
                take a look at
                <span>our services</span>
            </h3>
        </div>
        <div class="word wow fadeIn" data-wow-delay="100ms">
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                from a line in section 1.10.32.
            </p>
        </div>
        <div class="four">
            <div class="demo">
                <div class="pic wow fadeIn" data-wow-delay="150ms">
                    <img src="./assets/images/01.png" alt="">
                </div>
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="200ms">Web design</h1>
                    <p class="wow fadeIn" data-wow-delay="250ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit
                        amet..", comes from a line in section 1.10.32.</p>
                </div>

            </div>
            <div class="demo">
                <div class="pic wow fadeIn" data-wow-delay="150ms">
                    <img src="./assets/images/02.png" alt="">
                </div>
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="200ms">Mobile apps</h1>
                    <p class="wow fadeIn" data-wow-delay="250ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit
                        amet..", comes from a line in section 1.10.32.</p>
                </div>

            </div>
            <div class="demo">
                <div class="pic wow fadeIn" data-wow-delay="150ms">
                    <img src="./assets/images/01.png" alt="">
                </div>
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="200ms">PHOTOGRAPHY</h1>
                    <p class="wow fadeIn" data-wow-delay="250ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit
                        amet..", comes from a line in section 1.10.32.</p>
                </div>

            </div>
            <div class="demo">
                <div class="pic wow fadeIn" data-wow-delay="150ms">
                    <img src="./assets/images/01.png" alt="">
                </div>
                <div class="font">
                    <h1 class="wow fadeIn" data-wow-delay="200ms">marketing</h1>
                    <p class="wow fadeIn" data-wow-delay="250ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit
                        amet..", comes from a line in section 1.10.32.</p>
                </div>

            </div>
        </div>
    </div>
    <!-- 第五部分 -->
    <div class="clients" id="clients">
        <div class="container">
            <div class="title wow fadeIn">
                <h3>
                    SOME OF
                    <span> OUR CLIENTS</span>
                </h3>
            </div>
            <div class="brand wow fadeIn" data-wow-delay="100ms">
                <img src="./assets/images/CHANEL.png" alt="">
                <img src="./assets/images/ZARA.png" alt="">
                <img src="./assets/images/GUERLAIN.png" alt="">
                <img src="./assets/images/LANCOME.png" alt="">
                <img src="./assets/images/LACOSTE.png" alt="">
            </div>
            <div class="page wow fadeIn" data-wow-delay="200ms">
                <input type="radio" name="chkn" id="chk4">
                <label for="chk4" id="chk4" class="choice">
                </label>
                <input type="radio" name="chkn" id="chk5">
                <label for="chk5" id="chk5" class="choice">
                </label>
                <input type="radio" name="chkn" id="chk6">
                <label for="chk6" id="chk6" class="choice">
                </label>
            </div>
        </div>
    </div>
    <!-- 第六部分 -->
    <div class="work" id="work">
        <div class="container">
            <div class="title wow fadeIn">
                <h3>
                    take a look at
                    <span> our work</span>
                </h3>
            </div>
            <p class="wow fadeIn" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
                treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
                "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            <div class="desc">
                <div class="top wow fadeIn" data-wow-delay="200ms">
                    <div class="left">Filter by type</div>
                    <div class="right">
                        <span>All</span>
                        |
                        <span>Web design</span>
                        |
                        <span>Mobile design </span>
                        |
                        <span>Photograpy</span>
                    </div>
                    <div class="choice">
                        <select name="type" id="type">
                            <option>请选择</option>
                            <option>All</option>
                            <option>Web design</option>
                            <option>Mobile design</option>
                            <option>Photograpy</option>
                        </select>
                    </div>
                </div>
                <div class="imgs">
                    <div class="box wow fadeIn" data-wow-delay="250ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="250ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="250ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="250ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="350ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="350ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="350ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                    <div class="box wow fadeIn" data-wow-delay="350ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="cover">
                            <h3>Trend and fashion</h3>
                            <p>Website design</p>
                            <img src="./assets/images/Forma 1.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第七部分 -->
    <div class="testimonials" id="testimonials">
        <div class="container">
            <div class="title wow fadeIn">
                <h3>
                    <span>our clients’ </span>
                    testimonials
                </h3>
            </div>
            <p class="wow fadeIn" data-wow-delay="100ms">This book is a treatise on the theory of ethics, very popular
                during the Renaissance. The first line of
                Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </p>
            <div class="person wow fadeIn" data-wow-delay="200ms">
                Dean Martin,<span>CEO Acme Inc.</span>
            </div>
            <div class="page wow fadeIn" data-wow-delay="300ms">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <!-- 第八部分 -->
    <div class="contact" id="contact">
        <div class="container">
            <div class="title wow fadeIn">
                <h3>
                    feel free to
                    <span> contact us</span>
                </h3>
            </div>
            <p class="wow fadeIn" data-wow-delay="100ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance.
            </p>
            <div class="formtext">
                <form method="post">
                    <div class="top wow fadeIn" data-wow-delay="200ms">
                        <div class="left">
                            <p>Name <sup>*</sup></p>
                            <div class="inputbox">
                                <input required type="text" name="username" id="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="right">
                            <p>Email address <sup>*</sup></p>
                            <div class="inputbox">
                                <input required type="email" name="email" id="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                    </div>
                    <div class="message wow fadeIn" data-wow-delay="300ms">
                        <p>Message <sup>*</sup></p>
                        <textarea required name="message" id="message" placeholder="请输入信息"></textarea>
                    </div>

                    <div class="send wow fadeIn" data-wow-delay="400ms">
                        <button type="submit">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 第九部分 -->
    <div class="foot" id="foot">
        <div class="container">
            <div class="left">
                <p>ALL RIGHTS RESERVED. COPYRIGHT 
                   <span>© 2014 SPIRIT8</span> 
                </p>
                    <p><span><a href="https://beian.miit.gov.cn/" target="_blank">备案号:</a>
                    <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2023012557号</a></span>
                    <img src="./assets/images/beian.png" style="width: 18px;"/>
                    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44010502002702" rel="noreferrer" target="_blank">粤公网安备44010502002702</a>
                </p>
            </div>
            <div class="right">
                <div class="icons">
                    <div class="circle">
                        <img src="./assets/images/footer1.png" alt="">    
                    </div>
                    <div class="circle">
                        <img src="./assets/images/footer2.png" alt="">
                    </div>
                    <div class="circle">
                        <img src="./assets/images/footer3.png" alt="">
                    </div>
                    <div class="circle">
                        <img src="./assets/images/footer4.png" alt="">
                    </div>
                    <div class="circle">
                        <img src="./assets/images/footer5.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 返回顶部 -->
    <div class="up">
        <a href="#main">
            <img src="./assets/images/top.svg" alt="">
        </a>
    </div>
</body>

</html>
<!-- 导入jquery -->
<script src="./assets/js/jquery.min.js"></script>
<!-- 导入解析less的js -->
<script src="./assets/js/less.min.js"></script>
<!-- 导入js -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 导入动画js -->
<script src="./assets/js/wow.min.js"></script>
<script>
    new WOW().init();
</script>